<template>
  <t-submenu :value="menuInfo.path" :title="menuInfo.meta.title">
    <template #icon>
      <component :is="menuInfo.meta.icon" />
    </template>
    <template v-for="(item, index) in menuInfo.children" :key="index">
      <template v-if="item.children && item.children.length > 0">
        <menuList :menu-info="item" />
      </template>
      <template v-else>
          <router-link :to="item.path">
            <t-menu-item :value="item.path">
              <template #icon>
                <component :is="item.meta.icon" />
              </template>
              <span>{{ item.meta.title }}</span>
            </t-menu-item>
          </router-link>
      </template>
    </template>
  </t-submenu>
</template>
<script setup lang="ts" name="menuList">
const props = defineProps({
  menuInfo: {
    type: Object,
    default: () => ({}),
  },
});
</script>
<style lang="scss" scoped>
.t-default-menu .t-menu__item:first-child,
.t-default-menu .t-menu__item:last-child {
  margin-top: 4px !important;
}
</style>
